import React, { useState } from "react";
import { Button, Card, Form, Popconfirm, Select, Table } from "antd";
import { ColumnsType } from "antd/lib/table";
import { DeleteOutlined, FormOutlined, PlusOutlined } from "@ant-design/icons";

export default function Attr() {
  // 1.当前页
  const [current, setCurrent] = useState(1);
  // 2.每页条数
  const [pageSize, setPageSize] = useState(5);
  // 3.总条数
  const [total, setTotal] = useState(0);

  const provinceData = ["Zhejiang", "Jiangsu"];
  const cityData = {
    Zhejiang: ["Hangzhou", "Ningbo", "Wenzhou"],
    Jiangsu: ["Nanjing", "Suzhou", "Zhenjiang"],
  };

  type CityName = keyof typeof cityData;
  const [cities, setCities] = useState(cityData[provinceData[0] as CityName]);
  const [secondCity, setSecondCity] = useState(
    cityData[provinceData[0] as CityName][0]
  );

  const handleProvinceChange = (value: CityName) => {
    setCities(cityData[value]);
    setSecondCity(cityData[value][0]);
  };

  const onSecondCityChange = (value: CityName) => {
    setSecondCity(value);
  };

  // 表单数据
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }

  const columns: ColumnsType<DataType> = [
    {
      title: "序号",
      render(text, record, index) {
        return index + 1;
      },
      align: "center",
    },
    {
      title: "属性名称",
      dataIndex: "attrName",
      key: "attrName",
    },
    {
      title: "属性值名称列表",
      dataIndex: "attrValueList",
      key: "attrValueList",
    },

    {
      title: "操作",
      key: "action",
      render: (value, row, index) => (
        <>
          <Button type="primary">
            <FormOutlined />
          </Button>
          <Popconfirm title={`确定删除吗?`} okText="确定" cancelText="取消">
            <Button
              type="primary"
              danger
              icon={<DeleteOutlined />}
              className="ml"
            />
          </Popconfirm>
        </>
      ),
    },
  ];

  const data: DataType[] = [
    {
      key: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      tags: ["nice", "developer"],
    },
    {
      key: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      tags: ["loser"],
    },
    {
      key: "3",
      name: "Joe Black",
      age: 32,
      address: "Sidney No. 1 Lake Park",
      tags: ["cool", "teacher"],
    },
  ];

  return (
    <div>
      <Card>
        <Form layout="inline">
          <Form.Item label="一级分类">
            <Select></Select>
          </Form.Item>

          <Form.Item label="二级分类">
            <Select></Select>
          </Form.Item>

          <Form.Item label="三级分类">
            <Select></Select>
          </Form.Item>
        </Form>
      </Card>
      <Card>
        <Button type="primary">
          <PlusOutlined />
          添加属性
        </Button>
        <Table
          columns={columns}
          dataSource={data}
          pagination={{
            current,
            pageSize,
            total,
            showQuickJumper: true,
            showSizeChanger: true,
            showTotal: (total) => `共 ${total} 条`,
          }}
        />
      </Card>
    </div>
  );
}
